﻿<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>矢量地图文档显示</title>
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="mapboxgl" src="./static/libs/include-mapboxgl-local.js"></script>
  <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    /** 地图初始化
     */
    var map;
    var tiandituKey = "f5347cab4b28410a6e8ba5143e3d5a35";

    function init() {
      "use strict";
      //地图容器
      var vecsrc = {
        //来源类型为栅格瓦片
        type: "raster",
        tiles: [
          //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
          "http://t" +
          Math.round(Math.random() * 7) +
          ".tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" +
          "&TILECOL=" +
          "{x}" +
          "&TILEROW=" +
          "{y}" +
          "&TILEMATRIX=" +
          "{z}" +
          "&tk=" +
          tiandituKey,
        ],
        //栅格瓦片的分辨率
        tileSize: 256,
      };
      //实例化要加载的source来源对象（全球矢量中文注记）
      var cvasrc = {
        //来源类型为栅格瓦片
        type: "raster",
        tiles: [
          //来源请求地址，请求天地图提供的全球矢量中文注记WMTS服务
          "http://t" +
          Math.round(Math.random() * 7) +
          ".tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles" +
          "&TILECOL=" +
          "{x}" +
          "&TILEROW=" +
          "{y}" +
          "&TILEMATRIX=" +
          "{z}" +
          "&tk=" +
          tiandituKey,
        ],
        //栅格瓦片的分辨率
        tileSize: 256,
      };

      map = new mapboxgl.Map({
        container: "map",
        crs: "EPSG:4326",
        minZoom: 3,
        zoom: 4,
        center: [116.39, 39.9],
        style: {
          //设置版本号，一定要设置
          version: 8,
          //添加来源
          sources: {
            vecsrc: vecsrc,
            cvasrc: cvasrc,
          },
          //设置加载并显示来源的图层信息
          layers: [
            {
              //图层id，要保证唯一性
              id: "vecsrc",
              //图层类型
              type: "raster",
              //连接图层来源
              source: "vecsrc",
              //图层最小缩放级数
              minzoom: 0,
              //图层最大缩放级数
              maxzoom: 22,
            },
            {
              //图层id，要保证唯一性
              id: "cvasrc",
              //图层类型
              type: "raster",
              //连接图层来源
              source: "cvasrc",
              //图层最小缩放级数
              minzoom: 0,
              //图层最大缩放级数
              maxzoom: 22,
            },
          ],
        },
      });
      var navigationControl = new mapboxgl.NavigationControl();
      map.addControl(navigationControl, "top-left");

      var { protocol, ip, port } = window.webclient;
      map.on("load", () => {
        map.addLayer({
          id: "wmts-layer",
          type: "raster",
          source: {
            type: "raster",
            tiles: [
              `${protocol}://${ip}:${port}/igs/rest/mrms/tile/EPSG_4326_WORLD_TILE/{z}/{y}/{x}`,
            ],
            tileSize: 256,
            mapgisOffset: -1,
          },
        });
      });
      //注册鼠标移动事件
      map.on('mousemove', function (e) {
        document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2);
      });
    }
  </script>
</head>

<body onload="init()">
  <div id="map" style="width: 100%; height:700px;">
    <div id="mouse-position">
    </div>
  </div>
</body>

</html>